import AutoComplete from "@/components/AutoComplete";
import Button from "@/components/Button";
import Service, { ServiceImp } from "@/components/LookForward";
import Menu from "@/components/Menu";
import MenuItem from "@/components/Menu/MenuItem";
import Progress from "@/components/Progress";
import React from "react";
import { createRef, useCallback } from "react";
import Home from "../home";
import Mine from "../mine";
import Case from "./case";

const TestComponent = () => {
  const ref = createRef<ServiceImp>();

  /**调用子组件的方法 */
  const handleClick = useCallback(() => {
    ref?.current?.log();
  }, [ref]);
  return (
    <div>
      {" "}
      <Menu>
        <MenuItem>one</MenuItem>
        <MenuItem>two</MenuItem>
        <MenuItem>three</MenuItem>
        {/* <li>123</li> */}
      </Menu>
      <Home />
      {/* context */}
      <Mine />
      exercise
      {/* 进度条组件(应将百分比设置在外面更好一些,值较小时候显示不全) */}
      {/* <Progress percent={20} /> */}
      {/* <Foo /> */}
      <AutoComplete
        defaultValue="123423"
        onSelect={(item) => {
          console.log(item);
        }}
        fetchSuggestions={(str) => {
          return ["123", "234", "46"];
        }}
      />
      {/* 按钮 */}
      <Button disabled>按钮</Button>
      {/* foward的使用 */}
      <Service ref={ref} />
      <button onClick={handleClick}>点击</button>
      <Case />
    </div>
  );
};

export default TestComponent;
